import React from 'react';
import {NavItem, NavDropdown, Nav, MenuItem} from 'react-bootstrap';
import Icon from '../shared/Icon';
import { browserHistory } from 'react-router'

class UserMenu extends React.Component {

    constructor(props) {
        super(props);
    }

    registerClicked(e) {
        e.preventDefault();
        this.context.router.push('register');
    }

    loginClicked(e) {
        e.preventDefault();
        this.context.router.push('login');
    }
    logoutClicked(e) {
        e.preventDefault();
        this.props.dispatch(logout());
    }

    render() {
      const {user} = this.props;

      if (user) {
          return (
              <NavItem eventKey={1} onClick={this.logoutClicked}>
                  <Icon icon="sign-out"/> Logout
              </NavItem>
          );
      }
      else {
          return (
              <Nav bsStyle="pills">
                <NavItem eventKey={1} onClick={this.registerClicked.bind(this)}>
                    Register
                </NavItem>

                <NavItem eventKey={2} onClick={this.loginClicked.bind(this)}>
                    Login
                </NavItem>
              </Nav>
          );
      }
    }
};

UserMenu.contextTypes = {
  router: React.PropTypes.func.isRequired
}

export default UserMenu;
